<template>
    <el-dialog :title="title" :visible.sync="isDial" width="400px" class="addSub" :before-close="closeDialog">
  <el-form :model="form" size="mini" :rules='rules' ref="addSub">
      <el-form-item label="所属大类" :label-width="formLabelWidth">
          <el-input v-model="form.parent" :disabled="true" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="子类名称" prop='name' :label-width="formLabelWidth">
      <el-input v-model="form.name" :maxlength='10' class="leftBorder" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="mini" type="primary" @click="saveSub">确 定</el-button>
  </div>
</el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            isDial: false,
            form: {
                name: '',
                parent: '',
            },
            rules: {
                name: [
                    {
                        pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                        required: true,
                        message: "子类名称是必填项",
                        trigger: "blur"
                    }
                ]
            },
            title:'添加子类',
            formLabelWidth: '80px',
            parent:'',
            sub:''
        }
    },
    created(){
        this.$root.$on('addSub',(type,parent,sub)=>{
            this.parent=parent
            let form=this.form;
            form.parent=parent.name
            if(type=='edit'){
                this.title='编辑子类'
                this.sub=sub
                form.name=sub.name
            }else{
                this.title='添加子类'
            }
            this.isDial=true
        })
    },
    methods:{
        saveSub(){
            this.$refs.addSub.validate(valid => {
                if(!valid){
                    return
                }
                let form=this.form
                let parent=this.parent
                let sub=this.sub
                let met='POST'
                let that=this
                let url='sonType?name='+form.name+'&parentId='+parent.id
                if(that.title=="编辑子类"){
                    met='PUT'
                    url='sonType?name='+form.name+'&parentId='+parent.id+'&id='+sub.id
                }
                request.ajaxPost({
                    url,
                    that,
                    type:met,
                    fn(res) {
                        that.isDial = false;
                        that.resetForm();
                        that.$root.$emit('saveSub','on')
                    }
                });
            })
        },
        resetForm() {
        //清空记录
            this.$refs["addSub"].resetFields();
        },
        closeDialog() {
            this.isDial = false;
            this.resetForm();
        }
    }
}
</script>
<style lang="less" scoped>
.addSub{
    text-align: left;
    .el-input{
        width:80%
    }
    .el-select{
        width:80%
    }
}
</style>
